<div class="row data-type">

    <div class="col-md-2 title">日期[单选]</div>
    <div class="col-md-4 data">
        <div class="input-group date">
            <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
            </div>
            <input type="text" class="form-control pull-right" id="datepicker">
        </div>
    </div>

    <div class="col-md-2 title">日期时间[单选]</div>
    <div class="col-md-4 data">
        <div class="input-group date">
            <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
            </div>
            <input type="text" class="form-control pull-right" id="dateTimePicker">
        </div>
    </div>

    <div class="col-md-2 title">日期[区间]</div>
    <div class="col-md-4 data">
        <div class="input-group">
            <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
            </div>
            <input type="text" class="form-control pull-right" id="reservation">
        </div>
    </div>

    <div class="col-md-2 title">日期时间[区间]</div>
    <div class="col-md-4 data">
        <div class="input-group">
            <div class="input-group-addon">
            <i class="fa fa-clock-o"></i>
            </div>
            <input type="text" class="form-control pull-right" id="reservationtime">
        </div>
    </div>

    <div class="col-md-2 title">日期[时间段]</div>
    <div class="col-md-4 data">
        <div class="input-group">
            <button type="button" class="btn btn-default pull-right" id="daterange-btn">
            <span>
                <i class="fa fa-calendar"></i> 日期选取
            </span>
            <i class="fa fa-caret-down"></i>
            </button>
        </div>
    </div>


</div>



<script>

$(document).ready(function(){
        
    //Date picker
    $('#datepicker').datepicker({
        autoclose: true,
        language:'zh-CN'
    });

    // datetime picker
    $('#dateTimePicker').datetimepicker({
        format: "mm/dd/yyyy - hh:ii",
        autoclose: true,
        todayBtn: true,
        language: 'zh-CN'
    });

    //Date range picker
    $('#reservation').daterangepicker({
        locale: {
            applyLabel: '确认',
            cancelLabel: '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            firstDay : 1
        },
        opens : 'left',    // 日期选择框的弹出位置
        separator : ' 至 '
        //showWeekNumbers : true,     // 是否显示第几周
    });

    //Date range picker with time picker
    $('#reservationtime').daterangepicker({
        timePicker: true, 
        timePickerIncrement: 30, 
        format: 'MM/DD/YYYY h:mm A',
        locale: {
            applyLabel: '确认',
            cancelLabel: '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            firstDay : 1
        },
        opens : 'right',    // 日期选择框的弹出位置
        separator : ' 至 '
    });

    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
            locale: {
                applyLabel: '确认',
                cancelLabel: '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                firstDay : 1
            },
            opens : 'right',    // 日期选择框的弹出位置
            separator : ' 至 ',
            ranges: {
            '今日': [moment(), moment()],
            '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近7日': [moment().subtract(6, 'days'), moment()],
            '最近30日': [moment().subtract(29, 'days'), moment()],
            '本月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment().subtract(29, 'days'),
            endDate: moment()
        },
        function (start, end) {
            $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );

});

</script>